<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>22001010913刘文奇-我的页面</title>
    <link rel="stylesheet" href="liuwenqi4.css">
</head>
<body>
    <div class="liu-container">
        <div class="liu-header">
            <img src="img/85aef7868c1b963948f5e9d34e9fdf3.jpg" alt="用户头像">
            <div>
                <h2 id="username">刘文奇</h2>
                <p id="status">在线简历</p>
            </div>
        </div>
        <div class="liu-diagnosis">
            <strong id="diagnosis-title">简历诊断</strong><br>
            <span id="diagnosis-description">检测到1项内容缺失，请尽快完善</span>
        </div>
        <div class="liu-button-container" id="button-container">
            <a href="#" class="liu-button" id="button-1">
                <img src="img/fujianjianli.png" alt="附件简历图标">
                <p>附件简历</p>
            </a>
            <a href="#" class="liu-button" id="button-2">
                <img src="img/toudifanying.png" alt="投递反馈图标">
                <p>投递反馈</p>
            </a>
            <a href="#" class="liu-button" id="button-3">
                <img src="img/shoucang.png" alt="我的收藏图标">
                <p>我的收藏</p>
            </a>
            <a href="#" class="liu-button" id="button-4">
                <img src="img/zuijinliulan.png" alt="最近浏览图标">
                <p>最近浏览</p>
            </a>
        </div>
        <h3 id="job-intent-label">求职意向 请完善 ></h3>
        <div class="liu-section">
            <h3 id="section-title">求职必备</h3>
            <div class="icon-grid" id="icon-grid">
                <!-- 动态插入图标 -->
            </div>
        </div>
        <div class="liu-footer">
            <p id="footer-text">最近浏览 · 请完善</p>
        </div>
    </div>

    <script>
const url = "http://rap2api.taobao.org/app/mock/321651/myView";

// DOM元素
const dom = {
    "liu_container": document.querySelector(".liu-container"),
    "liu_header": document.querySelector(".liu-header"),
    "liu_diagnosis": document.querySelector(".liu-diagnosis"),
    "liu_button_container": document.querySelector(".liu-button-container"),
    "job_intent": document.querySelector("h3"),
    "liu_section": document.querySelector(".liu-section"),
    "liu_footer": document.querySelector(".liu-footer")
};

// 使用fetch获取数据，解析json
fetch(url)
    .then(response => response.json())
    .then(data => {
        // 更新liu_header部分
        document.getElementById("username").textContent = data.liu_container.liu_header.username;
        document.getElementById("status").textContent = data.liu_container.liu_header.status;

        // 更新liu_diagnosis部分
        document.getElementById("diagnosis-title").textContent = data.liu_container.liu_diagnosis.title;
        document.getElementById("diagnosis-description").textContent = data.liu_container.liu_diagnosis.description;

        // 更新按钮容器
        const buttonContainer = document.getElementById("button-container");
        data.liu_container.liu_button_container.forEach((button, index) => {
            const buttonElement = buttonContainer.children[index];
            buttonElement.querySelector("p").textContent = button.label;
            buttonElement.setAttribute("href", button.link);
        });

        // 更新求职意向部分
        document.getElementById("job-intent-label").textContent = data.liu_container.job_intent.label;

        // 更新求职必备部分
        document.getElementById("section-title").textContent = data.liu_container.liu_section.title;
        const iconGrid = document.getElementById("icon-grid");
        data.liu_container.liu_section.icons.forEach(icon => {
            const iconDiv = document.createElement("div");
            iconDiv.classList.add("icon");
            iconDiv.innerHTML = `
                <img src="img/${icon.label}.png" alt="${icon.label}图标">
                <p>${icon.label}</p>
            `;
            iconGrid.appendChild(iconDiv);
        });

        // 更新页脚部分
        document.getElementById("footer-text").textContent = data.liu_container.liu_footer.text;

        // 为整个容器添加渐变显示效果
        dom.liu_container.style.opacity = 0;  // 初始透明
        setTimeout(() => {
            dom.liu_container.style.transition = "opacity 1s";
            dom.liu_container.style.opacity = 1;  // 渐变显示
        }, 200);

        // 按钮点击动画效果
        const buttons = document.querySelectorAll(".liu-button");
        buttons.forEach(button => {
            button.addEventListener('mouseover', () => {
                button.style.transform = "scale(1.05)";
                button.style.transition = "transform 0.2s";
            });

            button.addEventListener('mouseout', () => {
                button.style.transform = "scale(1)";
            });
        });
    })
    .catch(error => console.error("Error fetching data:", error));

    </script>
</body>
</html>
